<template>
   
  <div class="app">
    <el-container class="app">
      <el-aside :width="isCollapse ? '64px' : '160px'">
        <!-- 导航菜单 -->
        <el-menu
          :default-active="$route.path"
          class="el-menu-vertical-demo"
          :collapse="isCollapse"
          :collapse-transition="false"
          :background-color="color"
          router
          active-text-color='#fff'
        >
        <!-- logo -->
          <li class="show-logo">
            <img src="../assets/lg.png" alt="" />
          </li>
          <el-menu-item index="/">
            <i class="el-icon-menu"></i>
            <span slot="title">首页</span>
          </el-menu-item>
          <el-menu-item :index="'/'+item.identification" v-for="item in powers" :key="item._id">
            <i class="el-icon-menu"></i>
            <span slot="title">{{item.p_name}}</span>
          </el-menu-item>
        </el-menu>
      </el-aside>
      <el-container>
        <el-header class="navber" :style="{ 'background-color': color }">
          <el-row>
            <el-col :span="12">
              <div class="nav_left">
                <el-row :gutter="20">
                  <el-col :span="2">
                    <div>
                      <i
                        class="el-icon-s-operation"
                        @click="isCollapse = isCollapse ? false : true"
                      ></i>
                    </div>
                  </el-col>
                  <el-col :span="20">
                    <div class="nav_left_tj">
                      <h3>江苏传智播客教育科技股份有限公司</h3>
                      <el-button size="mini">体验版</el-button>
                    </div>
                  </el-col>
                </el-row>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="nav_right">
                <ul class="nav_right_">
                  <li>
                    <el-tooltip
                      class="item"
                      effect="dark"
                      content="换肤"
                      placement="bottom"
                    >
                      <el-color-picker v-model="color"></el-color-picker>
                    </el-tooltip>
                  </li>
                  <el-dropdown>
                    <li>
                      <el-avatar size="small" :src="user.header"></el-avatar>
                      <span>{{ user.user ? user.user : "123" }}</span>
                      <i class="el-icon-arrow-down"></i>
                    </li>
                    <el-dropdown-menu slot="dropdown">
                      <el-dropdown-item @click.native="rehome"
                        >首页</el-dropdown-item
                      >
                      <el-dropdown-item @click.native="logout"
                        >退出登录</el-dropdown-item
                      >
                    </el-dropdown-menu>
                  </el-dropdown>
                </ul>
              </div>
            </el-col>
          </el-row>
        </el-header>
        <el-main>
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>

  </div>
</template>

<script>
import { mapActions, mapMutations, mapState } from "vuex";
export default {
  name: "Vue",
  props: {},
  data() {
    return {
      isCollapse: false,
      color: "rgb(23, 146, 183)",
    };
  },
  mounted() {
    this.getPowerList();
  },
  methods: {
    ...mapActions(["getPowerList"]),
    ...mapMutations(['getuser']),
    // 跳转首页
    rehome() {
      this.$router.push("/");
    },
    // 退出登录
    logout() {
      
      sessionStorage.removeItem("token");
      sessionStorage.removeItem("vuex");
      this.getuser({})
      this.$router.replace("/login");
    },
  },
  computed: {
    ...mapState(["user", "powers"]),
  },
};
</script>

<style lang="scss" scoped>
.app {
  height: 100%;
}
.nav_right_ {
  list-style: none;
  margin: 0;
}
.el-aside {
  height: 100%;
  -webkit-box-shadow: 2px 0 6px rgb(0 21 41 / 35%);
  z-index: 1001;
  overflow: hidden;
}
.el-menu {
  height: 100%;
  background: url("../assets/bj.png") no-repeat 0 100%;
}
.show-logo {
  height: 64px;
  text-align: center;
  line-height: 64px;
  font-size: 20px;
  text-align: center;
  margin: 5px;
  padding: 0;
  color: #fff;
  font-weight: 600;
  font-family: Myriad Pro, Helvetica Neue, Arial, Helvetica, sans-serif;
}
.show-logo img {
  width: 100%;
  margin: 5px;
  padding: 0;
  border: none;
}
.navber {
  color: #fff;
  width: 100%;
  height: 64px;
  line-height: 64px;
}
.nav_left_tj {
  width: 320px;
  overflow: hidden;
}
.nav_left_tj h3 {
  font-size: 15px;
  display: inline-block;
}
.nav_left_tj .el-button {
  background-color: rgba(255, 255, 255, 0.405);
  color: #fff;
  margin-left: 10px;
}
.nav_left_tj .el-button:hover {
  border: 0;
}
.nav_right {
  float: right;
  height: 64px;
  line-height: 64px;
}
.nav_right ul,
.nav_right ul li {
  display: flex;
  justify-content: center;
  align-items: center;
}
.nav_right ul li {
  margin-right: 15px;
}
.nav_right_ span {
  margin: 0 5px;
}
</style>
